import React, { Component } from 'react';
import { InputNumber } from 'antd';
import { observer, inject } from "mobx-react";
import './CategoryTable.less'

@inject('rootStore') @observer
class CategoryTable extends Component {

  render() {
    const integrationStore = this.props.rootStore.integrationStore;

    return (
      <div className="list-table integration-table mt0">
        <ul className="table-header">
          <li className="header-item">Category</li>
          <li className="header-item">Integral</li>
          <li className="header-item">Category</li>
          <li className="header-item">Integral</li>
          <li className="header-item">Category</li>
          <li className="header-item">Integral</li>
        </ul>
        <div className="category-table-container">
          {
            integrationStore.categoryListFifty.map((item, index) => {
              return (
                <ul className="table-container" key={index}>
                  <li className="container-item name">{item.name}</li>
                  <li className="container-item integration">
                    <InputNumber
                      value={item.integral}
                      min={0}
                      max={100}
                      precision={0}
                      onChange={(value) => integrationStore.integrationOnChange(value, index)} />
                  </li>
                </ul>
              )
            })
          }
        </div>
      </div>
    )
  }
}


export default CategoryTable;
